<template>
    <div class="invoice-dialog">
        <el-form ref="myForm" label-width="80px" :model="formData" :rules="ruleValidate" >
            <el-form-item label="发票类型">
                <!--{{ formData.type == 0 ? '常规发票' : ( formData.type == 1 ? '电子发票' : '增值税发票')}}-->
                <span v-if="formData.type == 1">电子发票</span>
                <span v-if="formData.type == 2 && formData.tax_type == 1">常规发票</span>
                <span v-if="formData.type == 2 && formData.tax_type == 2">增值税专用发票</span>
                <span v-if="formData.type == 2 && formData.tax_type == 3">增值税普通发票</span>
            </el-form-item>
            <el-form-item label="发票号" prop="invoice_number">
                <el-input v-model="formData.invoice_number" placeholder="请输入发票号"></el-input>
            </el-form-item>
            <el-form-item label="邮寄公司" prop="post_company" v-if="formData.type !== 1">
                <el-input v-model="formData.post_company" placeholder="请输入邮寄公司"></el-input>
            </el-form-item>
            <el-form-item  label="邮寄单号" prop="post_number" v-if="formData.type !== 1">
                <el-input v-model="formData.post_number" placeholder="请输入邮寄单号"></el-input>
            </el-form-item>
            <el-form-item label="存档" prop="file">
                <el-upload
                        ref="upload"
                        class="upload-demo"
                        :action="$store.state.upload.imageHost"
                        name="file"
                        :on-preview="handlePictureCardPreview"
                        :on-success="handleSuccess"
                        :on-remove="handleRemove"
                        :on-error="handleError"
                        :file-list="uploadList"
                        :multiple="true"
                        accept=".jpg,.png,.pdf"
                        list-type="picture-card">
                    <div>点击上传</div>
                    <div slot="tip" class="el-upload__tip" style="padding-left:10px">只能上传<span style="color: red;"> jpg/png/pdf </span>文件，且不超过500kb</div>
                </el-upload>
            </el-form-item>
        </el-form>
        <div class="invoice-dialog-footer">
            <el-button type="default"  @click="handleReset">取消</el-button>
            <el-button type="primary" :loading="modalLoading" @click="handleSubmit">确定</el-button>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'spot-info',
        props: {
            invoiceData: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            value: {
                type: Boolean
            }
        },
        components: {
        },
        data() {
            return {
                myValue: false,
                uploadList: [],
                operateId: null, // 要操作的id
                formData:{
                    type: null,
                    tax_type: null,
                    invoice_number:null,
                    post_company:null,
                    post_number:null
                },
                modalLoading:false,
                ruleValidate: {
                    invoice_number: [
                        {required: true, message: '请输入发票号', trigger: 'change'}
                    ]
                }
            }
        },
        watch: {
            value: function (val) {
                this.myValue = this.value;
            },
            myValue:function (val) {
                if (!val) {
                    this.uploadList = [];
                } else {
                    this.uploadList = [];
                    this.formData.type = this.invoiceData.type;
                    this.formData.tax_type = this.invoiceData.tax_type;
                    this.formData.post_company = this.invoiceData.mailing_name;
                    this.formData.post_number = this.invoiceData.mailing_number;
                    this.formData.invoice_number = this.invoiceData.invoice_number;
                    if (this.invoiceData.picture) {
                        this.invoiceData.picture.forEach(item=>{
                            this.uploadList.push({name: '',url:item})
                        });
                    }

                }
                this.$emit('input',this.myValue)
            }
        },
        mounted() {
            this.myValue = this.value;
            this.formData.type = this.invoiceData.type;
            this.formData.tax_type = this.invoiceData.tax_type;
            this.formData.post_company = this.invoiceData.mailing_name;
            this.formData.post_number = this.invoiceData.mailing_number;
            this.formData.invoice_number = this.invoiceData.invoice_number;
            if (this.invoiceData.picture){
                this.invoiceData.picture.forEach(item=>{
                    this.uploadList.push({name: '',url:item})
                });
            }
        },
        methods: {
            handleSuccess(file, fileList) {
                // if(file.code == 412){
                //     console.log('上传',file);
                //     this.$message.error(file.msg);
                // }
            },
            handleRemove(file, fileList) {
                // console.log('移除',file, fileList);
            },
            handleError(file, fileList) {
                if (fileList.name.indexOf('.jpg') == -1 || fileList.name.indexOf('.png') == -1) {
                    this.$message.error('只支持上传jpg/png/pdf格式');
                }
            },
            handlePictureCardPreview(file) {
                window.open(file.url);
                // console.info('file',file);
            },
            handleSubmit() {
                this.$refs['myForm'].validate(valid => {
                    if(valid){
                        let uploadList = [];
                        this.$refs.upload.uploadFiles.forEach(item=>{
                            if (item.response) {
                                uploadList.push(item.response.data.url);
                            } else {
                                uploadList.push(item.url);
                            }
                        });
                        let picture = JSON.stringify(uploadList);
                        let params = {
                            picture: picture,
                            invoice_number: this.formData.invoice_number,
                            mailing_number: this.formData.post_number,
                            mailing_name: this.formData.post_company
                        };
                        this.modalLoading = true;
                        this.$http.put('money/invoice/' + this.invoiceData.id, params)
                            .then((response) => {
                                this.$emit('successChange');
                                this.myValue = false;
                                this.modalLoading = false;
                            })
                            .catch((error) => {
                                this.modalLoading = false;
                                if (error.response.data.msg) {
                                    this.$message.error(error.response.data.msg);
                                } else {
                                    this.$message.error('请求错误：' + error.response.status);
                                }
                            });
                    }
                })
            },
            handleReset() {
                this.myValue = false;
            }
        }
    }
</script>
<style lang="less">
    .invoice-dialog{
        padding: 20px 30px 0 20px;
        .invoice-dialog-footer{
            text-align: center;
        }
        .el-upload-list__item .el-icon-close-tip{
            opacity: 0;
        }
    }
</style>

